<template>
  <div>
    <div><font style="align-content: center;font-size: 24px">我的付费文章</font></div>
    <div>
      <el-table
        :data="articleOrders"
        stripe
        style="width: 100%"
        tooltip-effect="dark">

        <el-table-column
          prop="id"
          label="ID"
          width="50">
        </el-table-column>
        <el-table-column
          prop="orderNum"
          label="订单编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="articleName"
          label="文章名称">
        </el-table-column>
        <el-table-column
          prop="price"
          label="文章价格"
          width="100">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="订单支付时间">
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250">
          <template slot-scope="scope">
            <span v-if="scope.row.status=='WAIT_PAY'">
              <el-button type="text" size="small" @click="pay(scope.row.articleId)" >支付</el-button>
            </span>
            <span v-if="scope.row.status!='WAIT_PAY'">
              <el-button type="text" size="small" >已支付</el-button>
            </span>
            <el-button type="text" size="small" @click="findArticleById(scope.row.articleId)">查看详情</el-button>
            <el-button type="text" size="small" @click="deleteArticleOrder(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-html="alipay" ref="alipay"></div>
  </div>
</template>

<script>
  import axios from 'axios';
    export default {
        name: "articleOrder",
        data(){
          return{
            articleOrders:[],
            alipay:'',
          }
        },
        methods:{
          findAllArticleOrder(){
            axios.post('http://localhost:8088/articleOrder/findAllArticleOrder').then(res=>{
              if(res.data.code==0){
                this.articleOrders=res.data.data;
              }
            })
          },
          deleteArticleOrder(id){
            axios.post('http://localhost:8088/articleOrder/deleteArticleOrder',{id:id}).then(res=>{
              if(res.data.code==0){
                this.findAllArticleOrder();
              }
            })
          },
          pay(id){
            axios.post("http://localhost:8088/articleOrder/addArticleOrderFromOrder",{id:id}).then(res=>{
              this.alipay=res.data;
              this.$nextTick(() => {
                this.$refs.alipay.children[0].submit();
              })
            })
          },
          findArticleById(id){
            this.$router.push({name:"articleInfo",params:{id:id}});
          },

        },
      mounted() {
          this.findAllArticleOrder();
      }
    }
</script>

<style scoped>

</style>
